<template>
  <div class="job-filter">
    <div class="search-bar">
      <el-input
        v-model="keyword"
        placeholder="搜索职位名称、公司名称"
        clearable
        @input="handleSearch"
      >
        <template #prefix>
          <el-icon><search /></el-icon>
        </template>
      </el-input>
      
      <el-button type="primary" @click="handleSearch">
        搜索
      </el-button>
    </div>

    <div class="filter-section">
      <div class="filter-group">
        <div class="filter-label">工作城市</div>
        <div class="filter-options">
          <el-tag
            v-for="city in cities"
            :key="city.value"
            :type="selectedCity === city.value ? 'primary' : 'info'"
            class="filter-tag"
            @click="handleCitySelect(city.value)"
          >
            {{ city.label }}
          </el-tag>
        </div>
      </div>

      <div class="filter-group">
        <div class="filter-label">工作经验</div>
        <div class="filter-options">
          <el-tag
            v-for="exp in experiences"
            :key="exp.value"
            :type="selectedExperience === exp.value ? 'primary' : 'info'"
            class="filter-tag"
            @click="handleExperienceSelect(exp.value)"
          >
            {{ exp.label }}
          </el-tag>
        </div>
      </div>

      <div class="filter-group">
        <div class="filter-label">学历要求</div>
        <div class="filter-options">
          <el-tag
            v-for="edu in educations"
            :key="edu.value"
            :type="selectedEducation === edu.value ? 'primary' : 'info'"
            class="filter-tag"
            @click="handleEducationSelect(edu.value)"
          >
            {{ edu.label }}
          </el-tag>
        </div>
      </div>

      <div class="filter-group">
        <div class="filter-label">薪资范围</div>
        <div class="filter-options">
          <el-tag
            v-for="salary in salaries"
            :key="salary.value"
            :type="selectedSalary === salary.value ? 'primary' : 'info'"
            class="filter-tag"
            @click="handleSalarySelect(salary.value)"
          >
            {{ salary.label }}
          </el-tag>
        </div>
      </div>

      <div class="filter-group">
        <div class="filter-label">更多筛选</div>
        <div class="filter-options">
          <el-checkbox-group v-model="selectedFilters" @change="handleFilterChange">
            <el-checkbox label="remote">支持远程</el-checkbox>
            <el-checkbox label="urgent">急招岗位</el-checkbox>
            <el-checkbox label="internship">接受实习</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>

    <div class="filter-tags" v-if="hasActiveFilters">
      <div class="active-filters">
        <el-tag
          v-for="filter in activeFilters"
          :key="filter.type + filter.value"
          closable
          @close="removeFilter(filter)"
        >
          {{ filter.label }}
        </el-tag>
      </div>
      
      <el-button type="primary" link @click="clearFilters">
        清除筛选条件
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'

// 搜索关键词
const keyword = ref('')

// 筛选条件
const selectedCity = ref('')
const selectedExperience = ref('')
const selectedEducation = ref('')
const selectedSalary = ref('')
const selectedFilters = ref([])

// 城市选项
const cities = [
  { label: '全国', value: '' },
  { label: '北京', value: 'beijing' },
  { label: '上海', value: 'shanghai' },
  { label: '广州', value: 'guangzhou' },
  { label: '深圳', value: 'shenzhen' },
  { label: '杭州', value: 'hangzhou' }
]

// 工作经验选项
const experiences = [
  { label: '不限', value: '' },
  { label: '应届生', value: 'fresh' },
  { label: '1-3年', value: '1-3' },
  { label: '3-5年', value: '3-5' },
  { label: '5-10年', value: '5-10' },
  { label: '10年以上', value: '10+' }
]

// 学历要求选项
const educations = [
  { label: '不限', value: '' },
  { label: '大专', value: 'college' },
  { label: '本科', value: 'bachelor' },
  { label: '硕士', value: 'master' },
  { label: '博士', value: 'phd' }
]

// 薪资范围选项
const salaries = [
  { label: '不限', value: '' },
  { label: '3k以下', value: '0-3' },
  { label: '3-5k', value: '3-5' },
  { label: '5-10k', value: '5-10' },
  { label: '10-15k', value: '10-15' },
  { label: '15-20k', value: '15-20' },
  { label: '20-30k', value: '20-30' },
  { label: '30k以上', value: '30+' }
]

// 计算活跃的筛选条件
const activeFilters = computed(() => {
  const filters = []
  
  if (selectedCity.value) {
    filters.push({
      type: 'city',
      value: selectedCity.value,
      label: cities.find(c => c.value === selectedCity.value)?.label
    })
  }
  
  if (selectedExperience.value) {
    filters.push({
      type: 'experience',
      value: selectedExperience.value,
      label: experiences.find(e => e.value === selectedExperience.value)?.label
    })
  }
  
  if (selectedEducation.value) {
    filters.push({
      type: 'education',
      value: selectedEducation.value,
      label: educations.find(e => e.value === selectedEducation.value)?.label
    })
  }
  
  if (selectedSalary.value) {
    filters.push({
      type: 'salary',
      value: selectedSalary.value,
      label: salaries.find(s => s.value === selectedSalary.value)?.label
    })
  }
  
  selectedFilters.value.forEach(filter => {
    const labelMap = {
      remote: '支持远程',
      urgent: '急招岗位',
      internship: '接受实习'
    }
    
    filters.push({
      type: 'extra',
      value: filter,
      label: labelMap[filter]
    })
  })
  
  return filters
})

// 是否有活跃的筛选条件
const hasActiveFilters = computed(() => {
  return activeFilters.value.length > 0 || keyword.value
})

// 处理搜索
const handleSearch = () => {
  emitFilterChange()
}

// 处理城市选择
const handleCitySelect = (value) => {
  selectedCity.value = value
  emitFilterChange()
}

// 处理经验选择
const handleExperienceSelect = (value) => {
  selectedExperience.value = value
  emitFilterChange()
}

// 处理学历选择
const handleEducationSelect = (value) => {
  selectedEducation.value = value
  emitFilterChange()
}

// 处理薪资选择
const handleSalarySelect = (value) => {
  selectedSalary.value = value
  emitFilterChange()
}

// 处理额外筛选条件变化
const handleFilterChange = () => {
  emitFilterChange()
}

// 移除筛选条件
const removeFilter = (filter) => {
  switch (filter.type) {
    case 'city':
      selectedCity.value = ''
      break
    case 'experience':
      selectedExperience.value = ''
      break
    case 'education':
      selectedEducation.value = ''
      break
    case 'salary':
      selectedSalary.value = ''
      break
    case 'extra':
      selectedFilters.value = selectedFilters.value.filter(f => f !== filter.value)
      break
  }
  emitFilterChange()
}

// 清除所有筛选条件
const clearFilters = () => {
  keyword.value = ''
  selectedCity.value = ''
  selectedExperience.value = ''
  selectedEducation.value = ''
  selectedSalary.value = ''
  selectedFilters.value = []
  emitFilterChange()
}

// 触发筛选条件变化事件
const emit = defineEmits(['filter-change'])
const emitFilterChange = () => {
  emit('filter-change', {
    keyword: keyword.value,
    city: selectedCity.value,
    experience: selectedExperience.value,
    education: selectedEducation.value,
    salary: selectedSalary.value,
    extraFilters: selectedFilters.value
  })
}
</script>

<style lang="scss" scoped>
.job-filter {
  background: #fff;
  border-radius: $border-radius;
  padding: $spacing-lg;
  
  .search-bar {
    display: flex;
    gap: $spacing-md;
    margin-bottom: $spacing-lg;
    
    .el-input {
      flex-grow: 1;
    }
  }
  
  .filter-section {
    .filter-group {
      margin-bottom: $spacing-lg;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .filter-label {
        font-size: 0.9rem;
        color: $text-secondary;
        margin-bottom: $spacing-sm;
      }
      
      .filter-options {
        display: flex;
        flex-wrap: wrap;
        gap: $spacing-sm;
        
        .filter-tag {
          cursor: pointer;
          
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
  
  .filter-tags {
    margin-top: $spacing-lg;
    padding-top: $spacing-lg;
    border-top: 1px solid $border-color;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .active-filters {
      display: flex;
      flex-wrap: wrap;
      gap: $spacing-sm;
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .job-filter {
    .search-bar {
      flex-direction: column;
    }
    
    .filter-tags {
      flex-direction: column;
      gap: $spacing-md;
      
      .active-filters {
        width: 100%;
      }
    }
  }
}
</style> 